<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>银子:{{ money }}万元</h4>
    <h4>车子:一辆{{ car.brand }},价值{{ car.price }}亿元</h4>
    <!-- v-bind和前面的是一样的 -->
    <child />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, provide } from "vue";
import Child from "./Child.vue";

let money = ref(100);

let car = reactive({
  brand: "下北泽田所浩二",
  price: 114514,
});
//不要.value
//向后代提供数据

function updateMoney(value: number) {
  money.value -= value;
}
//.value传过去就不是响应式了 传的是一个值
provide("moneyContext", { money: money.value, updateMoney });
provide("car", car);
</script>

<style scoped>
.father {
  background: rgb(179, 179, 179);
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
</style>
